<template>
  <div class="home">
    <div class="myfrom login">
      <el-form
        :model="myform"
        status-icon
        label-width="80px"
        :rules="rules"
        class="form"
      >
      <h3 class="text">WELCOME</h3>
        <!-- 用户 -->
        <el-form-item label-width="auto" prop="user">
          <el-input v-model="myform.user" />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label-width="auto" prop="pass">
          <el-input v-model="myform.pass" />
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item label-width="auto">
          <el-button class="btn" type="primary" @click="fndebounce">登录 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import instance from '../api'
import debounce from '../plugin/debounce.js'
export default {
  name: "Home",
  data() {
    return {
      myform: {
        user: "liwenying",
        pass: "123456",
      },
      rules: {
        //根据prop的值正则验证
        //pattern:/123456/   正则
        user: [
          {
            required: true,
            message: "你填的不对",
            trigger: "blur",
            pattern: /liwenying/,
          },
        ],
        pass: [
          {
            required: true,
            message: "你填的不对",
            trigger: "blur",
            pattern: "/123456/",
          },
        ],
      },
    };
  },
  methods:{
      async fnsubmit(){
          let user=this.myform.user;
          let pass=this.myform.pass;
          let {data} = await instance.get('/user',{params:{user,pass}})
          console.log(data);

          // 路由守卫
          let token=data[0].token;
          localStorage.setItem('token',token);
          if(data.length>0){
              this.$message({
                  showClose:true,
                  message:'登录成功',
                  type:'success',
                  duration:1000,
                  onClose:()=>{
                    this.$router.push({name:"Myhome"})
                  }
              })
          }
      },
      fndebounce(){
          this.fnajax();
      }

  },
  created(){
    this.fnajax=debounce(this.fnsubmit);
  }
};
</script>

<style scoped>
    .home {
      width: 100%;
      height: 100%;
      background: url(../assets/bg.jpg) no-repeat;
       padding-top: 60px;
    } 
    .login {
      width: 100vw;
      height: 100vh;
      margin:auto;
      
    }
    .login .form {
      width:300px;
      height:300px;
      background:rgba(181,191,120,0.2);
      margin: 0 auto;
      padding-top: 28px;
      padding-left:24px;
      padding-right:24px;
    }
    .text {
      color: #fff;
      font-weight: bold;
      text-align: center;
      margin-bottom:18px;
    }
    .btn {
      width: 100%;
      height:38px;
    }
</style>
